---
title: Partager l'état entre les composants Astro
description: Apprendre à partager des états entre composants Astro avec Nano Stores.
i18nReady: true
type: recipe
---
import { Steps } from '@astrojs/starlight/components';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

:::tip
Vous utilisez des composants de Framework ? Voir [comment partager l'état entre les îlots](/fr/recipes/sharing-state-islands/)!
:::

Lors de la création d'un site web Astro, il se peut que vous deviez partager l'état des composants. Astro recommande l'utilisation de [Nano Stores](https://github.com/nanostores/nanostores) pour le stockage partagé des clients.

## Méthode

<Steps>
1. Installez Nano Stores:

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm install nanostores
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm add nanostores
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn add nanostores
      ```
      </Fragment>
    </PackageManagerTabs>

2. Créez un magasin. Dans cet exemple, le magasin indique si un dialogue est ouvert ou non :

    ```ts title="src/store.js"
    import { atom } from 'nanostores';

    export const isOpen = atom(false);
    ```

3. Importez et utilisez le magasin dans une balise `<script>` dans les composants qui partageront l'état.

    Les composants `Button` et `Dialog` suivants utilisent chacun l'état partagé `isOpen` pour contrôler si une `<div>` particulière est cachée ou affichée :
  
    ```astro title="src/components/Button.astro"
    <button id="openDialog">Ouvrir</button>
  
    <script>
      import { isOpen } from '../store.js';
      
      // Définir le magasin sur true lorsque le bouton est cliqué
      function openDialog() {
        isOpen.set(true);
      }
  
      // Ajouter un écouteur d'événement au bouton
      document.getElementById('openDialog').addEventListener('click', openDialog);
    </script>
    ```
  
    ```astro title="src/components/Dialog.astro"
    <div id="dialog" style="display: hidden">Hello world!</div>
  
    <script>
      import { isOpen } from '../store.js';
  
      // Écouter les changements dans le magasin et afficher/masquer le dialogue en conséquence    
      isOpen.subscribe(open => {
        if (open) {
          document.getElementById('dialog').style.display = 'block';
        } else {
          document.getElementById('dialog').style.display = 'none';
        }
      })
    </script>
    ```
</Steps>

## Ressources

- [Nano Stores sur NPM](https://www.npmjs.com/package/nanostores)
- [Documentation de Nano Stores pour Vanilla JS](https://github.com/nanostores/nanostores#vanilla-js)
